<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fun-Sport 系统诊断</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            max-width: 800px;
            width: 100%;
            padding: 40px;
        }
        h1 {
            color: #333;
            margin-bottom: 10px;
            font-size: 28px;
        }
        .subtitle {
            color: #666;
            margin-bottom: 30px;
            font-size: 14px;
        }
        .status-card {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            border-left: 4px solid #667eea;
        }
        .status-card h3 {
            color: #333;
            margin-bottom: 15px;
            font-size: 18px;
        }
        .status-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #e0e0e0;
        }
        .status-item:last-child {
            border-bottom: none;
        }
        .status-label {
            color: #666;
            font-size: 14px;
        }
        .status-value {
            font-weight: 600;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 13px;
        }
        .status-success {
            background: #d4edda;
            color: #155724;
        }
        .status-error {
            background: #f8d7da;
            color: #721c24;
        }
        .status-loading {
            background: #fff3cd;
            color: #856404;
        }
        .test-button {
            background: #667eea;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            margin: 10px 10px 10px 0;
        }
        .test-button:hover {
            background: #5568d3;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
        }
        .test-button:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
        }
        .info-box {
            background: #e7f3ff;
            border-left: 4px solid #2196F3;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
        }
        .info-box h4 {
            color: #1976D2;
            margin-bottom: 10px;
        }
        .info-box p {
            color: #555;
            font-size: 14px;
            line-height: 1.6;
        }
        .link-box {
            background: #f0f0f0;
            padding: 10px 15px;
            border-radius: 6px;
            margin: 10px 0;
            display: inline-block;
            font-family: 'Courier New', monospace;
            font-size: 14px;
        }
        .link-box a {
            color: #667eea;
            text-decoration: none;
            font-weight: 600;
        }
        .link-box a:hover {
            text-decoration: underline;
        }
        .actions {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 2px solid #e0e0e0;
        }
        #result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 6px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            line-height: 1.6;
            white-space: pre-wrap;
            word-break: break-all;
            max-height: 300px;
            overflow-y: auto;
            display: none;
        }
        #result.show {
            display: block;
        }
        #result.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        #result.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔍 Fun-Sport 系统诊断工具</h1>
        <p class="subtitle">快速检测前端和后端服务状态</p>

        <div class="info-box">
            <h4>📍 正确的访问地址</h4>
            <div class="link-box">
                <a href="http://localhost:3308" target="_blank">http://localhost:3308</a>
            </div>
            <p><strong>登录信息：</strong> 用户名: admin  |  密码: admin</p>
        </div>

        <div class="status-card">
            <h3>🌐 服务状态</h3>
            <div class="status-item">
                <span class="status-label">前端地址</span>
                <span class="status-value status-loading" id="frontend-status">检测中...</span>
            </div>
            <div class="status-item">
                <span class="status-label">后端地址</span>
                <span class="status-value status-loading" id="backend-status">检测中...</span>
            </div>
            <div class="status-item">
                <span class="status-label">登录API</span>
                <span class="status-value status-loading" id="login-status">未测试</span>
            </div>
            <div class="status-item">
                <span class="status-label">用户管理API</span>
                <span class="status-value status-loading" id="user-status">未测试</span>
            </div>
            <div class="status-item">
                <span class="status-label">系统管理API</span>
                <span class="status-value status-loading" id="admin-status">未测试</span>
            </div>
        </div>

        <div class="actions">
            <h3 style="margin-bottom: 15px; color: #333;">🧪 快速测试</h3>
            <button class="test-button" onclick="testAll()">🔄 全部测试</button>
            <button class="test-button" onclick="testFrontend()">测试前端</button>
            <button class="test-button" onclick="testBackend()">测试后端</button>
            <button class="test-button" onclick="testLogin()">测试登录</button>
            <button class="test-button" onclick="openAdmin()">🚀 打开管理后台</button>
        </div>

        <div id="result"></div>
    </div>

    <script>
        let token = '';

        function updateStatus(id, status, text) {
            const element = document.getElementById(id);
            element.className = 'status-value status-' + status;
            element.textContent = text;
        }

        function showResult(message, type = 'success') {
            const result = document.getElementById('result');
            result.className = 'show ' + type;
            result.textContent = message;
        }

        async function testFrontend() {
            try {
                const response = await fetch('http://localhost:3308');
                if (response.ok || response.status === 200) {
                    updateStatus('frontend-status', 'success', '✅ 运行中 (3308)');
                    showResult('✅ 前端服务正常！\n地址：http://localhost:3308', 'success');
                } else {
                    throw new Error('前端服务响应异常');
                }
            } catch (error) {
                updateStatus('frontend-status', 'error', '❌ 离线');
                showResult('❌ 前端服务未运行或无法访问\n请检查服务是否启动', 'error');
            }
        }

        async function testBackend() {
            try {
                const response = await fetch('http://localhost:8858/api/web/auth/login', {
                    method: 'OPTIONS'
                });
                updateStatus('backend-status', 'success', '✅ 运行中 (8858)');
                showResult('✅ 后端服务正常！\n地址：http://localhost:8858', 'success');
            } catch (error) {
                updateStatus('backend-status', 'error', '❌ 离线');
                showResult('❌ 后端服务未运行或无法访问\n请检查服务是否启动', 'error');
            }
        }

        async function testLogin() {
            try {
                const response = await fetch('http://localhost:8858/api/web/auth/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        username: 'admin',
                        password: 'admin'
                    })
                });

                const data = await response.json();
                
                if (data.code === 200 && data.data.token) {
                    token = data.data.token;
                    updateStatus('login-status', 'success', '✅ 正常');
                    showResult('✅ 登录API正常！\n\n返回数据：\n' + JSON.stringify(data, null, 2), 'success');
                    
                    // 继续测试其他API
                    testUserAPI();
                    testAdminAPI();
                } else {
                    throw new Error('登录失败：' + (data.message || '未知错误'));
                }
            } catch (error) {
                updateStatus('login-status', 'error', '❌ 异常');
                showResult('❌ 登录API异常：' + error.message, 'error');
            }
        }

        async function testUserAPI() {
            if (!token) {
                await testLogin();
                return;
            }

            try {
                const response = await fetch('http://localhost:8858/api/web/user/list?page=1&pageSize=10', {
                    headers: {
                        'Authorization': 'Bearer ' + token
                    }
                });

                const data = await response.json();
                
                if (data.code === 200) {
                    updateStatus('user-status', 'success', '✅ 正常');
                } else {
                    throw new Error(data.message || '请求失败');
                }
            } catch (error) {
                updateStatus('user-status', 'error', '❌ 异常');
            }
        }

        async function testAdminAPI() {
            if (!token) {
                await testLogin();
                return;
            }

            try {
                const response = await fetch('http://localhost:8858/api/web/admin-users?page=1&pageSize=10', {
                    headers: {
                        'Authorization': 'Bearer ' + token
                    }
                });

                const data = await response.json();
                
                if (data.code === 200) {
                    updateStatus('admin-status', 'success', '✅ 正常');
                } else {
                    throw new Error(data.message || '请求失败');
                }
            } catch (error) {
                updateStatus('admin-status', 'error', '❌ 异常');
            }
        }

        async function testAll() {
            showResult('正在执行全面测试，请稍候...', 'success');
            await testFrontend();
            await new Promise(resolve => setTimeout(resolve, 500));
            await testBackend();
            await new Promise(resolve => setTimeout(resolve, 500));
            await testLogin();
            showResult('✅ 全部测试完成！请查看上方状态指示。', 'success');
        }

        function openAdmin() {
            window.open('http://localhost:3308', '_blank');
        }

        // 页面加载时自动测试前端和后端
        window.onload = function() {
            setTimeout(() => {
                testFrontend();
                testBackend();
            }, 500);
        };
    </script>
</body>
</html>

